<template>
	<view class="page content">
		<unitv-page id="indexPage" ref="unitvPage" @back="pageBack">
			<view>
				<unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone2"  :item="3" :values="item1" :column="item1.length">
					<unitv-scroll>
						<unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item" @hover="hoverItem">{{a}}</unitv-item>
					</unitv-scroll>
				</unitv-zone>
			</view>
			<unitv-zone id="zone2" class="zone2" up="zone1" down="zone3" :values="item2" :column="item2.length">
				<unitv-item v-for="(a,index) in item2" :item="index" :key="index" class="item" @click="clickItem">{{a}}</unitv-item>
			</unitv-zone>
			<unitv-zone id="zone3" class="zone3" up="zone2" down="zone4" :values="item3" :column="item3.length">
				<unitv-item v-for="(a,index) in item3" :item="index" :key="index" class="item">{{a}}</unitv-item>
			</unitv-zone>
			<view class="title">Title</view>
			<unitv-zone id="zone4" class="zone4" up="zone3" down="zone5" :values="item4" :column="item4.length">
				<unitv-scroll>
					<unitv-item v-for="(a,index) in item4" :item="index" :key="index" class="item">{{a}}</unitv-item>
				</unitv-scroll>
			</unitv-zone>
			<view class="title">Title2</view>
			<unitv-zone id="zone5" class="zone5" up="zone4" :values="item5" :column="6" :row="2">
				<unitv-item v-for="(a,index) in item5" :item="index" :key="index" class="item">{{a}}</unitv-item>
			</unitv-zone>
		</unitv-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				item2: [1, 2],
				item3: [1, 2, 3, 4],
				item4: [1, 2, 3, 4, 5, 6, 7, 8],
				item5: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				curIndex:7
			}
		},
		onBackPress(options) {
			this.$refs.unitvPage.evtBack();
			return true;
		},
		computed: {
		},
		onLoad() {},
		onReady() {

		},
		methods: {
			pageBack(e){
				console.log("按了返回");
				uni.showModal({
				    title: '提示',
				    content: '是否退出',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							 plus.runtime.quit();  
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				return false;
			},
			hoverItem(e){
				console.log("获得焦点："+e)
				
			},
			clickItem(e){
				console.log("点击了："+e);
				uni.showToast({
				    title: '成功点击了',
					icon:'none',
				    duration: 2000
				});
			}
		}
	}
</script>



<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.item {
		background: #d6d6d6;
		margin: 0px 10rpx;
		text-align: center;
		display: inline-block;
	}

	.zone1 {
		height: 50rpx;
		width: 100%;
		display: flex;
		white-space: nowrap;
		margin-top: 40rpx;
		    align-items: center;
	}

	.zone1 .item {
		width: 80rpx;
		height: 40rpx;
		line-height: 40px;
	}

	.zone2 {
		margin-top: 5rpx;
		display: flex;
		height: 160rpx;
		    align-items: center;
	}

	.zone2 .item {
		width: 50%;
		height: 150rpx;
		line-height: 150px;
	}

	.zone3 {
		margin-top: 5rpx;
		display: flex;
		height: 110rpx;
		    align-items: center;
	}

	.zone3 .item {
		width: 25%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.zone4 {
		margin-top: 5rpx;
		width: 100%;
		height: 110rpx;
		display: inline-block;
		white-space: nowrap;
		    align-items: center;
	}

	.zone4 .item {
		width: 25%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.zone5 {
		margin-top: 5rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 50rpx;
		align-items: center;
	}

	.zone5 .item {
		width: 105rpx;
		height: 135rpx;
		line-height: 115rpx;
		margin: 5rpx;
	}

	.item-hover {
		transform: scale(1.04);
		box-shadow: 2px 4px 6px #555555;
		animation: glow 1500ms ease-out infinite alternate;
		-webkit-transform: scale(1.04);
		-webkit-box-shadow: 2px 4px 6px #555555;
		-webkit-animation: glow 1500ms ease-out infinite alternate;
		background: #585dfa;
		zoom: 1.05;
	}
	.zone1 .item-active{
		zoom:0;
		background:#4CD964
	}
	.zone1 .item-hover{
		zoom:0;
		background:#DD524D
	}
	.zone5 .item-hover{
		zoom:0;
		background:#ff007f
	}
</style>
